<template>
  <div class="opt-area-mask" @click="closeMenu">
    <div class="opt-menu-plane more-opt-plane" :style="props.menuStyle">
      <div class="opt-btn-item-wrapper opt-btn" v-for="(buttonItem, index) in props.buttons" :key="index" @click="clickButton(buttonItem.handle)">
        <div class="opt-btn-icon">
          <el-icon><Component :is="buttonItem.icon"></Component></el-icon>
        </div>
        {{buttonItem.name}}
      </div>
    </div>
  </div>
</template>

<script lang = "ts" setup>
import type {Component} from "vue";
const menuEvent = defineEmits(['menuClick', 'closeMenu'])
type Button = {
  name: string,
  icon: Component,

  handle: Function
};
const props = defineProps<{buttons: Array<Button>, menuStyle:{left: string, top: string}}>()
const clickButton = (handle: Function) => {
  menuEvent('menuClick', {
    handle
  })
}
const closeMenu = () => {
  menuEvent('closeMenu');
}
</script>

<style lang="less" scoped>
.opt-area-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10000;
  background: rgba(80, 80, 80, 0.23);
  .more-opt-plane{
    margin-top: 9vh;
    position: fixed;
    width: 164px;
    border: 1px #00000025 solid;
    box-shadow: 0 4px 20px 0 #0000001c;
    border-radius: 6px;
    font-size: 12px;
    right: 0;
    z-index: 90000;
    background: #FFFFFF;
    cursor: pointer;
    .opt-btn:hover {
      background-color: rgb(156 191 239 / 57%);
    }
    .opt-btn{
      width: auto;
      display: flex;
      .opt-btn-icon {
        padding-top: 2px;
      }
      .el-icon{
        margin-right: 6px;
        padding-top: 6px;
        margin-left: 26px;
      }
      font-size: 14px;
      margin:  0px;
      padding: 12px 0;
      height: 48px;
      cursor: pointer;
    }
  }
}
</style>